<template>
    <MyHead title="我的" :isleft="false"></MyHead>

    <div class="difault">
        <div class="defaulthead">
            <div class="login" v-if="!istoken">
                <van-button type="primary" :to="{name:'login',query:{ReturnURL:encodeURIComponent('/my')}}">授权登录</van-button>
            </div>
            <div class='login' v-else>
                <div class="picName">
                    <div style="margin-bottom: .5rem;" >
                       <label for="uploadimg">
                        <van-image round width="1.5rem" height="1.5rem"
                            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                        </label>
                            <input type="file" style="display: none;" id="uploadimg" @change="uploadimg($event)">
                       
                    </div>
                    <div>{{username}}</div>
                </div>
            </div>
        </div>
        <van-cell title="操作列表" />

        <div v-for="item, index in list" :key="index">
            <van-cell :title="item.text" icon="shop-o" :to=item.to is-link :value="item.value" v-show="item.isShow"/>
        </div>
        <van-button plain type="primary" class="outbtn" @click="outbtnHandler()" v-show="istoken">退出登录</van-button>
    </div>

    <van-overlay :show="show" @click="show = false">

    </van-overlay>

    <!-- round width="1.5rem" height="1.5rem" -->
    <MyFooter></MyFooter>
</template>

<script setup>

import { ref, reactive, onMounted,toRef} from "vue";


import { showConfirmDialog } from 'vant';


import { GoodStore } from "../../stores/user";


let goodstore=GoodStore();

let username=toRef(goodstore,'username');

console.log(username);


let token=toRef(goodstore,'token');


console.log(token,'token');


let randomnum = ref()


let istoken = ref(token)


let show = ref(false)

//操作栏渲染
let list = ref(
    [
        { text: '我的游记', value: 100, isShow: istoken, to: '/find' },
        { text: '我的评论', value: 100, isShow: istoken, to: '/MyComments' },
        { text: '我的点赞', value: 100, isShow: istoken, to: '/MyLikes' },
        { text: '我的收藏', value: 100, isShow: istoken, to: '/MyCollection' },
        { text: '钱包', value: '', isShow: istoken, to: '' },
        { text: '修改密码', value: '', isShow: istoken, to: '/ChangePassword' },
        { text: '公告', value: 100, isShow: true, to: '' },
        { text: '设置', value: '', isShow: true, to: '' },
        { text: '联系我们', value: '', isShow: true, to: '' },
        { text: '清除缓存', value: randomnum, isShow: true, to: '' },
    ]
)

//预览图片
// const fileList = ref([
//       { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
   // // Uploader 根据文件后缀来判断是否为图片文件
   // // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
//       { url: 'https://cloud-image', isImage: true },
// ]);


//退出登录事件
let outbtnHandler = () => {
    showConfirmDialog({
        title: '退出登录',
        width: '80%',
        message:
            '确定要退出登录吗？',
    })
        .then(() => {
            // on confirm
            goodstore.delToken()
            localStorage.removeItem('user')
        })
        .catch(() => {
            // on cancel
        });
}

//缓存清理事件
// let closezone = (item) => {
//     show.value = true;
// }

let uploadimg=(e)=>{
    console.log(e);
    let files=e.target.files;
    console.log(files);
}


onMounted(() => {
    randomnum.value = Math.floor(Math.random() * 100) + 'M';
})

</script>









<style lang="scss" scoped>
::v-deep.difault {
    // overflow: hidden;
    // box-sizing: border-box;

    .defaulthead {
        width: 100%;
        height: 5rem;
        background: #0ff;
        position: relative;

        .login {
            width: 100%;
            height: 100%;
            position: relative;

            .van-button,
            .picName {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }

            ;

            .picName {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
        }

    }

    .outbtn {
        width: 80%;
        margin:.4rem 0 0 .8rem;
       
    }

}
</style>

